<template>
  <div>
    <!-- 车牌绑定部分 -->
    <div class="bind-license-plate-container">
      <h2 class="page-title">车牌绑定</h2>
      <el-form :model="formData" ref="form" class="form-container">
        <el-form-item label="已绑车牌" >
          <el-input v-model="Alllicense_plates" disabled></el-input>
        </el-form-item>
        <!-- 输入车牌号 -->
        <el-form-item label="车牌号" prop="license_plates">
          <el-input v-model="formData.license_plates" placeholder="请输入车牌号"></el-input>
        </el-form-item>

        <!-- 上传图片 -->
        <el-form-item label="上传图片" prop="image">
          <el-upload class="upload-demo" :action="uploadUrl" list-type="picture-card" :on-change="handleChange"
            :file-list="fileList" :auto-upload="true" :on-success="uploadSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
   
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">绑定车牌</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getLicensePlates, addLicensePlate ,getAllUsersWithPlates} from "@/api/Approach";

export default {
  name: "BindLicensePlate",
  data() {
    return {
      tableData: [], // 添加 tableData 数据
      Alllicense_plates:'',
      formData: {
        license_plates: "",
        image: null,
      },
      fileList: [],
      uploadUrl: import.meta.env.VITE_APP_BASE_API
        ? `${import.meta.env.VITE_APP_BASE_API}/upload_image`
        : "/upload_image", // 确保 uploadUrl 始终为字符串
    };
  },
  methods: {
    queryData() {
      const ID = localStorage.getItem("userId");
      // getLicensePlates(ID)
      //   .then((res) => {
      //     this.tableData = res.data; // 更新表格数据
      //   })
      //   .catch((err) => {
      //     console.error("获取数据失败", err);
      //     this.$message.error("获取数据失败");
      //   });
    },
    handleChange(file) {
      if (file.raw) {
        this.fileList = [file];
        this.formData.image = file.raw;
      }
    },
    async uploadSuccess(response, file) {
      console.log("图片上传成功", response, file);
      this.formData.image = response.url; // 假设后端返回图片的 URL
      this.formData.license_plates = response['plate_number']

    },
    /**获取已绑车牌 */
    queryAllPlates(){
      const user = JSON.parse(localStorage.getItem('user'))
      getAllUsersWithPlates({username:user.name}).then((res)=>{
        this.Alllicense_plates = res.data[0]['license_plates']
      })
    },
    handleSubmit() {
      if (!this.formData.license_plates) {
        this.$message.error("请输入车牌号");
        return;
      }
      const ID = localStorage.getItem("userId"); // 确保 ID 在方法中可用
      addLicensePlate({
        user_id: ID,
        license_plates: this.formData.license_plates,
      })
        .then((res) => {
          console.log(res);
          this.$message.success(res.data.message);
          this.handleReset(); // 重置表单
          this.queryAllPlates()
        })
        .catch((err) => {
          console.error("出场失败", err);
          this.$message.error(err.response.data.message);
        });
    },
    handleReset() {
      this.formData.license_plates = "";
      this.fileList = [];
      this.formData.image = null;
    },
  },
  created() {
    this.queryData();
    this.queryAllPlates()
  },
};
</script>

<style scoped>
.bind-license-plate-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
